<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!-- http://cours.inow.fr/ingesup/ing1/bliss.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Bliss!</title>
	<link href="styles/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<link href="styles/default.css" rel="stylesheet">
        <noscript>
            <meta http-equiv="refresh" content="0;url=index2.php">
        </noscript>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script src="scripts/jquery/jquery-1.9.1.js"></script>
	<script src="scripts/jquery/jquery-ui-1.10.3.custom.js"></script>
        <script src="scripts/jquery/jquery.gvChart-1.1.js"></script>
        <script type="text/javascript">
            gvChartInit();
        </script>
	<script src="scripts/model/Machine.js"></script>
	<script src="scripts/model/Incident.js"></script>
	<script src="scripts/model/Salle.js"></script>
	<script src="scripts/widget/GuiSalle.js"></script>
	<script src="scripts/widget/TableMachine.js"></script>
	<script src="scripts/widget/TableSalle.js"></script>
	<script src="scripts/widget/TableIncident.js"></script>
        <script>
	$(document).ready(function() {
		$( "#tabs" ).tabs();
		$( "#recent-incidents" ).tabs();
                
                //CONNECTION
		var tooltips = $( "[title]" ).tooltip();
                $( "#dialog-connection" ).dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                      Ok: function() {
                        $( this ).dialog( "close" );
                      }
                    }
                });
                $("#connection div").append(
                $("<button>")
                    .text( "Log out" )
                    .button()
                    .click(function() {
                        $.ajax({
                            type: "POST",
                            data: {
                                USR_MAIL:$("#email").val(),
                                USR_PASSWORD:$("#password").val()
                            },
                            url: "json/connection/connect",
                            success: function(data, status, jqXHR){
                                if(status==="success"){
                                    $("#connection div").css("display","none");
                                    $("#connection form").css("display","block");
                                }
                            },
                        });                
                    })
                ); 
                $("#connection form").append(
                $( "<button>" )
                  .text( "Log in" )
                  .button()
                  .click(function() {
//                    tooltips.tooltip( "open" );
                    var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
                    if(reg.test($("#email").val()) && $("#password").val()!=""){
                        $.ajax({
                            type: "POST",
                            data: {
                                USR_MAIL:$("#email").val(),
                                USR_PASSWORD:$("#password").val()
                            },
                            url: "json/connection/connect",
                            success: function(data, status, jqXHR){
                                if(status==="success"){
                                    if(data["status"]=="connected"){
                                        $("#connection form").css("display","none");
                                        $("#connection div").css("display","block");
                                        $("#connection div p b").text($("#email").val());
                                    }else if(data["status"]=="error1"){
                                        $('#dialog-connection').dialog('destroy');
                                        $("#dialog-connection").html('<p><span class="ui-icon ui-icon-circle-close" style="float: left; margin: 0 7px 50px 0;"></span>Impossible de vous connecter</p><p>Verifier que votre <b>email</b> ou votre <b>mot de passe</b> n\'est pas vide</p>');
//                                        alert("Votre email ou votre mot de passe est vide ou votre email n'est pas bon format");$( "#dialog-form" ).dialog( "open" );
                                        $( "#dialog-connection" ).dialog({
                                            modal: true,
                                            buttons: {
                                              Ok: function() {
                                                $( this ).dialog( "close" );
                                              }
                                            }
                                        });
                                    }else{
                                        $('#dialog-connection').dialog('destroy');
                                        $("#dialog-connection").html('<p><span class="ui-icon ui-icon-circle-close" style="float: left; margin: 0 7px 50px 0;"></span>Impossible de vous connecter</p><p>Verifier votre <b>email</b> ou votre <b>mot de passe</b>.</p>');
                                        $( "#dialog-connection" ).dialog({
                                            modal: true,
                                            buttons: {
                                              Ok: function() {
                                                $( this ).dialog( "close" );
                                              }
                                            }
                                        });
                                    }
                                }
                            },
                            dataType: "json"
                        });
                    }
                    return false;
                  }));
                  
                  
                //TABS-HOME
                var guiHome = new GuiSalle("#tabs-home",60000);
                function refreshGuiHome(){
                    $.ajax({
                        type: "GET",
                        url: "json/get/salle",
                        success: function(data, status, jqXHR){
                            if(status==="success"){
                                guiHome.loadObject(data);
                            }               
                        },
                        dataType: "json"
                    });     
                    setTimeout(refreshGuiHome, 60000);
                }
                setTimeout(refreshGuiHome,0);
                  
                //TABS-MACHINE
                var tableMachine = new TableMachine("#tabs-machines",60000);
                function refreshTableMachine(){
                    $.ajax({
                        type: "GET",
                        url: "json/get/machine",
                        success: function(data, status, jqXHR){
                            if(status==="success"){
                                tableMachine.loadObject(data);
                                tableMachine.generateTable();
                            }               
                        },
                        dataType: "json"
                    });     
                    setTimeout(refreshTableMachine, 60000);
                }
                setTimeout(refreshTableMachine,0);
          
                //TABS-SALLE
                var tableSalle = new TableSalle("#tabs-salles",60000);
                function refreshTableSalle(){
                    $.ajax({
                        type: "GET",
                        url: "json/get/salle",
                        success: function(data, status, jqXHR){
                            if(status==="success"){
                                tableSalle.loadObject(data);
                                tableSalle.generateTable();
                            }               
                        },
                        dataType: "json"
                    });     
                    setTimeout(refreshTableSalle, 60000);
                }
                setTimeout(refreshTableSalle,0);
                  
                //TABS-INCIDENT
                var tableIncident = new TableIncident("#tabs-incidents",60000);
                function refreshTableIncident(){
                    $.ajax({
                        type: "GET",
                        url: "json/get/incident",
                        success: function(data, status, jqXHR){
                            if(status==="success"){
                                tableIncident.loadObject(data);
                                tableIncident.generateTable();
                            }               
                        },
                        dataType: "json"
                    });     
                    setTimeout(refreshTableIncident, 60000);
                }
                setTimeout(refreshTableIncident,0);
              
                //RECENT INCIDENT
                $.ajax({
                    type: "GET",
                    url: "json/get/incident",
                    success: function(data, status, jqXHR){
                        if(status==="success"){
                            for(var i=0; i < 10;i++){
                                var incident = data[i];
                                var h3 = $("<h3>",{
                                    text : incident["machine"]["ip"]
                                });
                                $("#tabs-incident-recent").append(h3);
                                var div = $("<div>",{
                                    html : '<p><span class="head">Type :</span>'+incident["type"]+'</p><p><span class="head">Date :</span>'+incident['date']+"</p>",
                                    class : "incident",
                                });
                                $("#tabs-incident-recent").append(div);
                            }
                            $( "#tabs-incident-recent" ).accordion({
                                collapsible: true
                            });
                        }
                    },
                    dataType: "json"
                   
                });
                //FORM-MACHINE
                $( "#dialog-form-machine" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Creer": function() {
                            $( this ).dialog( "close" );
                        },
                        "Annuler": function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
//                        allFields.val( "" ).removeClass( "ui-state-error" );
                    }
                });
                //FORM-SALLE
                $( "#dialog-form-salle" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Creer": function() {
                            $( this ).dialog( "close" );
                        },
                        "Annuler": function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
//                        allFields.val( "" ).removeClass( "ui-state-error" );
                    }
                });
                //FORM-SALLE
                $( "#dialog-form-incident" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Creer": function() {
                            $( this ).dialog( "close" );
                        },
                        "Annuler": function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
//                        allFields.val( "" ).removeClass( "ui-state-error" );
                    }
                });
                $('#myTable1').gvChart({
                    chartType: 'PieChart',
                    gvSettings: {
                        vAxis: {title: "Nb d'incidents"},
                        hAxis: {title: 'Salle'},
                        width: 490,
                        height: 400,
                        }
                });
                $('#myTable1').gvChart({
                    chartType: 'ColumnChart',
                    gvSettings: {
                        vAxis: {title: "Nb d'incidents"},
                        hAxis: {title: 'Salle'},
                        width: 490,
                        height: 400,
                        }
                });
	});
	</script>
    </head>
    <body>
        <header>
            <div id="head-cover">
                <img/>
            </div>
            <div id="connection">
                <form>
                    <span style="margin-right: 0px;font-weight: bolder; text-decoration: underline;">Connexion :</span>
                    <label for="email">Email</label>
                    <input id="email" name="email" title="Entrez votre email." />
                    <label for="password">Mot de passe</label>
                    <input id="password" name="password" type="password" title="Entrez votre mot de passe." />
                </form>
                <div style="display: none;">
                    <p style="display:inline;">
                    Connecté en tant que <b></b>
                    </p>
                </div>
            </div>
        </header>
        <section>
        <article id="tabs">
            <ul>
                <li class="menu-item"><a href="#tabs-home">Accueil</a></li>
                <li class="menu-item"><a href="#tabs-salles">Salles</a></li>
                <li class="menu-item"><a href="#tabs-machines">Machines</a></li>
                <li class="menu-item"><a href="#tabs-incidents">Incidents</a></li>
                <li class="menu-item"><a href="#tabs-statistiques">Statistiques</a></li>
            </ul>
            <div id="tabs-home">
<!--                <div class="salle big">
                    <p class="name">Salle1</p>
                    <div class="machines">
                        <div class="machine">
                            <div class="background">
                                <div class="info ok"></div>
                            </div>
                            <p class="ip">10.10.12.301</p>
                        </div>
                        <div class="machine">
                            <div class="background">
                                <div class="info error"></div>
                            </div>
                            <p class="ip">255.254.255.254</p>
                        </div>
                        <div class="machine">
                            <div class="delete"></div>
                            <div class="background">
                                <div class="info ok"></div>
                            </div>
                            <p class="ip">10.10.12.301</p>
                        </div>
                -->
            </div>
            <div id="tabs-salles">
<!--                <button>Ajouter une salle</button>
                <table class="table-salle">
                    <thead>
                    <td>Nom</td><td>Nb machine</td><td>Nb incident</td><td>Details</td>
                    </thead>
                    <tbody>
                        <tr><td>Salle 1</td><td>8 machines</td><td>2</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>Salle 2</td><td>12 machines</td><td>5</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>Salle blabla</td><td>18 machines</td><td>1</td><td><a href="#">Lien</a></td></tr>
                    </tbody>
                    <tfoot>
                        <td>Nom</td><td>Nb machine</td><td>Nb incident</td><td>Details</td>
                    </tfoot>
                </table>-->
            </div>
            <div id="tabs-machines" class="ui-widget">
<!--                <button>Ajouter une machine</button>-->
<!--                <table class="table-machine">
                    <thead>
                    <td>Salle</td><td>Ip</td><td>Ram</td><td>Disk</td><td>Nb incident</td><td>Details</td>
                    </thead>
                    <tbody>
                        <tr><td>1</td><td>10.10.12.204</td><td>2048 Mo</td><td>500 Go</td><td>5</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>1</td><td>10.10.12.204</td><td>2048 Mo</td><td>500 Go</td><td>5</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>25</td><td>255.255.255.254</td><td>16192 Mo</td><td>2000 Go</td><td>30</td><td><a href="#">Lien</a></td></tr>
                    </tbody>
                    <tfoot>
                    <td>Salle</td><td>Ip</td><td>Ram</td><td>Disk</td><td>Nb incident</td><td>Details</td>
                    </tfoot>
                </table>-->
            </div>
            <div id="tabs-incidents" class="ui-widget">
<!--                <table class="table-salle">
                    <thead>
                    <td>Salle</td><td>Machine</td><td>Date de report</td><td>Type</td><td>Date résolution</td><td>Details</td>
                    </thead>
                    <tbody>
                        <tr><td>Salle 1</td><td>10.10.12.204</td><td>2013-10-03 13:45:12</td><td>RAM faible</td><td>Non résolu</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>Salle 2</td><td>10.10.12.205</td><td>2013-09-04 12:55:54</td><td>Disque faible</td><td>2013-09-04 12:57:45</td><td><a href="#">Lien</a></td></tr>
                        <tr><td>Salle 1</td><td>10.10.12.204</td><td>2013-10-03 13:45:12</td><td>RAM faible</td><td>Non résolu</td><td><a href="#">Lien</a></td></tr>
                    </tbody>
                    <tfoot>
                        <td>Salle</td><td>Machine</td><td>Date de report</td><td>Type</td><td>Date résolution</td><td>Details</td>
                    </tfoot>
                </table>-->
            </div>
            <div id="tabs-statistiques">
                <table id='myTable1'>
                    <caption>Nombre d'incidents par salle</caption>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Salle1</th>
                            <th>Salle2</th>
                            <th>Salle3</th>
                            <th>Salle4</th>
                            <th>Salle5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>12</td>
                            <td>18</td>
                            <td>24</td>
                            <td>32</td>
                            <td>7</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
        <div id="recent-incidents" >
            <ul>
                <li class="menu-item"><a href="#tabs-recent">Récents</a></li>
                <li class="menu-item"><a href="#tabs-resolve">Résolus</a></li>
            </ul>
            <div id="tabs-incident-recent">
<!--                <h3>10.10.12.301</h3>
                <div class="incident">
                    <p><span class="head">Type :</span>Espace disque faible</p>
                    <p><span class="head">Date :</span>2013-10-02 13:10:30</p>
                </div>-->
            </div>
            <div id="tabs-resolve">
                <h3>Bla</h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
                <h3>Bla2</h3>
                <div>Phasellus mattis tincidunt nibh.</div>
                <h3>Bla3</h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
                <h3>Bla3</h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>        
        </section>
        <div id="dialog-connection" title="Erreur de connexion">
        </div>
        <div id="dialog-form-machine" title="Creer/Modifier/Afficher une machines">
            <form method="POST" name="monForm" onSubmit="return false;">
                <table>
                    <tr>
                        <td>Salle : </td>
                        <td> 
                            <select name='salle' size='1'>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Adresse IP : </td>
                        <td> <input type ='text' name='ip' required="required"/></td>
                    </tr>
                    <tr>
                        <td>RAM : </td>
                        <td> <input type='text' name='ram'></td>
                        <td><select name='tailleRam' >
                                <option>Mb</option>
                                <option>Gb</option>
                            </select>
                        </td>
                    <tr>
                        <td>Disque Dur : </td>
                        <td> <input type='text' name='hdd' /></td>
                        <td><select name='tailleHdd' >
                                <option>Mb</option>
                                <option>Gb</option>
                                <option>Tb</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="dialog-form-salle" title="Creer/Modifier/Afficher une salle">
            <form method="POST" name="monForm" onSubmit="return false;">
                <table>
                    <tr>
                        <td>Nom de la salle:  </td>
                        <td><input type ='text' name='nomSalle' /></td>
                    </tr>
                    <tr>
                        <td>Informations sur la salle: </td>
                        <td><textarea rows="3" cols="30"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type='submit' value='Envoyer'</td>
                    </tr>
                </table>            
            </form>
        </div>
        <div id="dialog-form-incident" title="Creer/Modifier/Afficher un incident">
            <form method="POST" name="monForm" onSubmit="return false;">
                <table>
                    <tr>
                        <td>ID Ordinateur: </td>
                        <td><select name="idPC" size="1">
                            <?php
    //                          $json = file_get_contents('http://127.0.0.1/projects/Bliss/trunk/Bliss/data/get/salle.php');
    //                          $data = json_decode($json,true);
                            ?>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Date de l'incident : </td>
                        <td><input type='text' name='dateIncident' placeholder="AAAA-MM-JJ hh:mm:ss"</td>
                    </tr>
                    <tr>
                        <td>Type de l'incident: </td>
                        <td><select name="labelInc" size="1">
                            <?php
    //                          $json = file_get_contents('http://127.0.0.1/projects/Bliss/trunk/Bliss/data/get/salle.php');
    //                          $data = json_decode($json,true);
                            ?>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Description de l'incident: </td>
                        <td><textarea rows="3" cols="30"></textarea></td>
                    </tr>
                    <tr>
                        <td><input type="submit" value='Envoyer'</td>
                    </tr>
                </table>           
            </form>
        </div>
        <?php
//        // put your code here
//        echo $_SERVER["SERVER_ADDR"].":".$_SERVER["SERVER_PORT"]."<br/>";
//        echo $_SERVER["SERVER_NAME"]."<br/>";
//        echo $_SERVER["DOCUMENT_ROOT"]."<br/>";
//        echo $_SERVER["SCRIPT_NAME"]."<br/>";
//        echo __FILE__."<br/>";
//        echo __DIR__."<br/>";
//        include $_SERVER["SERVER_ADDR"].":".$_SERVER["SERVER_PORT"].''.$_SERVER["SCRIPT_NAME"]."/data/get/salle.php";
//        ?>
    </body>
</html>
